<template>
  <!-- 图片展示 -->
  <el-image ref="elImage" :fit="fit" :src="src|imageUrl(isBase)" :class="classArray" :style="styleObj" :preview-src-list="previewList">
    <div slot="error" class="img-error">
      <i class="el-icon-picture-outline"></i>
    </div>
  </el-image>
</template>
<script>
export default {
  props: {
    fit: {
      default: "cover",
      type: String
    },
    src: {
      default: "",
      type: String
    },
    classArray: {
      default: function() {
        return [];
      },
      type: Array
    },
    styleObj: {
      type: Object,
      default: function() {
        return {};
      }
    },
    previewSrcList: {
      type: Array,
      default: function() {
        return [];
      }
    },
    //是否base64图片
    isBase: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      previewList: []
    };
  },
  methods: {
    clickHandler() {
      const th = this;
      th.$nextTick(function() {
        th.$refs["elImage"].clickHandler();
      });
    }
  },
  watch: {
    previewSrcList: {
      deep: true,
      immediate: true,
      handler: function(n) {
        let th = this; 
        if (th.isBase) {
          th.previewList = n;
        } else {
          th.previewList = n.map(d => {
            if (d.includes("http")) {
              return d;
            } else {
              return th.$config.imageUrl + d;
            }
          });
        }
      }
    }
  }
};
</script>
<style lang="scss" >
.img-error {
  height: 100%;
  font-size: 25px;
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
}
</style>